<template>
  <div class="member-admin animate__animated animate__fadeInUp">
    <!-- 系统设置成员管理导航栏 -->
    <div class="datr">
      <p class="ga"></p>
      <span class="chryu">成员管理</span>
    </div>
    <el-card shadow="never">
      <!-- 系统设置成员管理搜索查询添加 -->
      <div
        class="d-flex animate__animated animate__fadeInUp animate__delay-0.9s"
      >
        <p>
          <el-input placeholder="用户名/姓名" v-model="input" clearable>
          </el-input>
        </p>
        <p class="ml-1">
          <el-select v-model="value" placeholder="选择所属部门">
            <el-option
              v-for="item in options"
              :key="item.name"
              :label="item.label"
              :value="item.name"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </p>
        <p class="ml-1">
          <el-button
            type="primary"
            icon="el-icon-search"
            :loading="isloading"
            @click="mohuchaxu"
            >查询</el-button
          >
        </p>
        <p class="ml-1">
          <el-button plain @click="memberaddition">添加成员</el-button>
        </p>

        <!-- <p class="ml-1"><router-link tag="el-button" to="/memberaddition">添加成员</router-link></p> -->
      </div>

      <!-- 系统设置成员管理表格 -->
      <div class="mt-1">
        <p>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column label="成员账号" width="100">
              <template slot-scope="scope">{{ scope.row.number }}</template>
            </el-table-column>
            <el-table-column prop="memberName" label="姓名" width="100">
            </el-table-column>
            <el-table-column prop="mail" label="邮箱地址" width="170">
            </el-table-column>
            <el-table-column prop="departmentName" label="所属部门" width="100">
            </el-table-column>
            <el-table-column prop="created" label="添加时间"> </el-table-column>
            <el-table-column prop="last_login_time" label="最后登录时间">
            </el-table-column>
            <el-table-column prop="status" label="是否启用" width="80">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="
                    memberediting(scope, scope.$index, tableData)
                  "
                  >编辑</el-button
                >
                <el-button type="text" @click="open(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </p>
      </div>

      <!-- 页码 -->
      <div class="t-right">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="total"
          @current-change="diji"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import moment from "moment";
moment.locale("zh-cn");
// import Bige from '../../components/system/Bige.vue'
export default {
  data() {
    return {
      leng:0,//查询的length
      bianjie: {},
      limit: 6, //显示页数
      total: 0, //总页数
      page: 1, //当前页
      isloading: false, //搜素状态
      input: "", //搜索框的值
      value: "", //下拉框的值
      options: [],

      //表格渲染的值
      tableData: [],
    };
  },
  // 函数
  methods: {
    //当前页的点击
    diji(page) {
      this.page = page;
      console.log(this.page);
      this.chaXun();
      // this.total=this.tableData.length
      // console.log(this.page,this.total)
    },
    // 查询广告数据
    chaXun() {
      // console.log(111);
      this.$axios({
        url: "/gym/member/list",
        method: "post",
        data: {
          page: this.page,
          limit: this.limit,
        },
      }).then((res) => {
        console.log(res);
        this.leng=res.data.data.length;
        this.tableData = res.data.data;
        for (let i in this.tableData) {
          this.tableData[i].status =
            this.tableData[i].status == 0 ? "否" : "是";
          // console.log(this.tableData[0].status)
        }
        console.log(this.tableData);
        this.total = res.data.count;

        for (let t in this.tableData) {
          this.tableData[t].created = moment(this.tableData[t].created).format(
            "YYYY-MM-DD HH:mm:ss:ms"
          );
          this.tableData[t].last_login_time = moment(
            this.tableData[t].last_login_time
          ).format("YYYY-MM-DD HH:mm:ss:ms");
        }
        // console.log(moment("2021-06.08 8:25:12").format("x"))
      });
    },
    // 查询所有部门
    chaxunbumeng() {
      this.$axios({
        url: "/gym/department/list",
        method: "post",
      }).then((res) => {
        this.options = res.data.data;
        
      });
    },

    // 添加成员跳转函数
    memberaddition() {
      this.$router.push("memberaddition");
    },

    // 模糊查询
    mohuchaxu() {
      console.log(this.input);
      console.log(this.value);
      this.$axios({
        url: "/gym/member/list",
        method: "post",
        data: {
          page: this.page,
          limit: this.limit,
          name: this.input,
          departmentName: this.value,
        },
      }).then((res) => {
        console.log(res)
        this.tableData=res.data.data;
      });
    },
    // 编辑成员
    memberediting(scope, index, tableData) {
      this.bianjie = scope.row;
      // console.log(scope.row.name,index, tableData)
      this.$router.push({
        path: "memberediting",
        name: "MemberEditing",
        params: { user: this.bianjie.id},
      });
    },
    // 删除
    open(scope) {
      console.log(scope);
      //  this.dialogFormVisible = true;
      this.$confirm("确定要删除该广告吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/gym/member/delete",
            method: "get",
            params: {
              id: scope.row.id,
            },
          })
            .then((res) => {
              console.log(res.data);
              if (
                (res.data.code >= 200 && res.data.code < 300) ||
                res.data.code == 304
              ) {
                // console.log(111);
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                 if(this.leng-1==0){
                  this.page--;
                }
               if(this.page<=1){
                 this.page=1;
               }
                this.chaXun();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch(() => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  // 创建前
  brforeCreate() {},
  // 创建后
  created() {},
  // 挂载前
  beforeMount() {
    this.chaXun();
    this.chaxunbumeng();
  },
  // 挂载后
  mounted() {
    // this.diji()
    console.log(this.total);
  },
  // 数据更新前
  beforeUpdate() {},
  // 数据更新后
  updated() {},
  // 销毁前
  beforeDestroy() {},
  // 销毁后
  destroyed() {},
};
</script>

<style scoped lang="less">
//导航栏
.datr {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: linear-gradient(
    to right,
    rgba(17, 17, 17, 0.619),
    rgba(14, 13, 13, 0.251)
  );
  border-radius: 8px 8px 0px 0px;

  .ga {
    display: flex;
    align-items: center;
    width: 5px;
    height: 35px;
    background-color: rgba(0, 0, 255);
    // line-height: 50px;
    margin-left: 10px;
  }
  .chryu {
    display: inline-block;
    width: 80px;
    height: 50px;
    line-height: 50px;
    color: rgb(248, 243, 243);
    font-size: 17px;
    font-weight: bold;
  }
}
</style>